<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Document</title>
</head>
<style>

    .grid-container{
        width: 100%;   
        background-color: transparent;       
    }   
    .grid-container *{
        box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }      
    /*-- our cleafix hack -- */ 
    .row:before, 
    .row:after {
        content:"";
        display: table ;
        clear:both;
    }

    [class*='col-'] {
        float: left; 
        min-height: 70px; 
        width: 16.66%; 
        /*-- our gutter -- */
        padding: 12px;        
    }
    .border{
        padding: 12px;
         background-color: #dedede;
        border: #222 solid 1px;
        height: 50px;
    }

   

    .col-1{ width: 8.333%; }
    .col-2{ width: 16.66%; }
    .col-3{ width: 25%;    }
    .col-4{ width: 33.33%; }
    .col-5{ width: 41.66%; }
    .col-6{ width: 50%;   }
    .col-7{ width: 58.33%; }
    .col-8{ width: 66.66%; }
    .col-9{ width: 75%;    }
    .col-10{ width: 83.33%; }
    .col-11{ width: 91.66%; }
    .col-12{ width: 100%;  }


    /*-- some extra column content styling --*/
    [class*='col-'] > p {
       padding: 0;
       margin: 0;       
       color: red; 
    }

    /*media query*/
       @media all and (min-width:800px){
        .col-sm-1{ width: 8.333%; }
        .col-sm-2{ width: 16.66%; }
        .col-sm-3{ width: 25%;    }
        .col-sm-4{ width: 33.33%; }
        .col-sm-5{ width: 41.66%; }
        .col-sm-6{ width: 50%;   }
        .col-sm-7{ width: 58.33%; }
        .col-sm-8{ width: 66.66%; }
        .col-sm-9{ width: 75%;    }
        .col-sm-10{ width: 83.33%; }
        .col-sm-11{ width: 91.66%; }
        .col-sm-12{ width: 100%;  }    
    }
</style>
<body>
    <div class="grid-container">   

        <div class="row">
            <div class="col-4 col-sm-6"><div class="border"><p>col-4 col-sm-6</p></div></div> 
            <div class="col-4 col-sm-6"><div class="border"><p>col-4 col-sm-6</p></div></div> 
            <div class="col-4 col-sm-12"><div class="border"><p>col-4 col-sm-12</p></div></div>
        </div>     
       
        <div class="row">
            <div class="col-3 col-sm-3"><div class="border"><p>col-3 col-sm-3</p></div></div> 
            <div class="col-6 col-sm-3"><div class="border"><p>col-6 col-sm-3</p></div></div> 
            <div class="col-3 col-sm-3"><div class="border"><p>col-3 col-sm-3</p></div></div> 
        </div>

        <div class="row">
            <div class="col-1 col-sm-2"><div class="border"><p>col-1 col-sm-2</p></div></div> 
            <div class="col-1 col-sm-2"><div class="border"><p>col-1 col-sm-2</p></div></div> 
            <div class="col-2 col-sm-8"><div class="border"><p>col-2 col-sm-8</p></div></div> 
            <div class="col-2 col-sm-3"><div class="border"><p>col-2 col-sm-3</p></div></div> 
            <div class="col-6 col-sm-3"><div class="border"><p>col-6 col-sm-3</p></div></div>
        </div>
        
    </div>
</body>
</html>
   